<template>
  <!--右键点击菜单  条目 -->
  <div class="context-menu-item" @click.stop="doClick" @mouseover="showSonMenu" @mouseleave="hiddenSonMenu">
    <slot></slot>
    <div v-if="isExistSon" >
      👉
      <div class="son-menu-list" v-if="sonMenuVisible">
        <slot name="sonMenu"></slot>
      </div>
    </div>
  </div>
</template>


<script setup>
import { computed, useSlots, ref } from "vue"

const $slots = useSlots()
const emit = defineEmits(['click'])

const isExistSon = computed(() => {
  return $slots.sonMenu ? true : false
})

const doClick = () => {
  emit('click')
  console.log(isExistSon.value)
}

const sonMenuVisible = ref(false)

const showSonMenu = (e)=> {
  sonMenuVisible.value = true
}

const hiddenSonMenu = (e)=> {
  sonMenuVisible.value = false
}
</script>
<style lang="scss" scoped>
.context-menu-item {
  line-height: 38px;
  height: 38px;
  padding: 0 15px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  position: relative;

  &:hover {
    background-color: #f6f6f6;
  }

  .son-menu-list {
    position: absolute;
    top: 0;
    right: 0px;
    transform: translateX(100%);
    width: 160px;
    font-size: 14px;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 2px 15px -5px rgba(0, 0, 0, .4);
  }
}
</style>